<template>
  <BasicModal
    :canFullscreen="false"
    width="60%"
    @cancel="handleCancel"
    v-bind="$attrs"
    @register="registerModal"
    title="开发函数应用"
  >
    <div class="container-box">
      <div class="left">
        <div class="mb-2">计算方式：</div>
        <ul>
          <li
            :class="item.type === active ? 'active' : ''"
            v-for="(item, index) in scripts"
            @click="active = item.type"
            :key="index"
            >{{ item.type }}. {{ item.label }}</li
          >
        </ul>
        <div class="remark">{{ scripts[active].remark }}</div>
      </div>
      <div class="right">
        <CodeEditor v-model:value="scripts[active].value" />
      </div>
    </div>
    <template #footer>
      <a-button @click="handleCancel">关闭</a-button>
      <a-button type="primary" @click="handleSubmit">保存</a-button>
    </template>
  </BasicModal>
</template>
<script lang="ts" setup name="ButtonsModal">
  // import { Textarea } from 'ant-design-vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { CodeEditor } from '/@/components/CodeEditor';
  import { funList } from './rights.data';
  import { ref } from 'vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { cloneDeep } from 'lodash-es';
  const emit = defineEmits(['submit', 'register']);
  const { createMessage } = useMessage();
  const rightId = ref(0);
  const scripts = ref(cloneDeep(funList));
  const [registerModal, { closeModal }] = useModalInner(async (data) => {
    //传进来的参数
    rightId.value = data.rightId;
    if (data.scripts && data.scripts.length > 0) {
      scripts.value.forEach((item) => {
        data.scripts.forEach((v) => {
          if (item.type === v.type) {
            item.value = v.value;
          }
        });
      });
    }
  });

  const active = ref<any>(0);
  async function handleSubmit() {
    const params = scripts.value
      .filter((i) => i.value)
      .map((v) => ({ type: v.type, value: v.value }));
    createMessage.success('操作成功');
    emit('submit', params, rightId.value);
    handleCancel();
  }
  function handleCancel() {
    closeModal();
    scripts.value = cloneDeep(funList);
    active.value = 0;
  }
</script>
<style lang="less" scoped>
  .container-box {
    padding: 0 20px;
    height: 590px;
    display: flex;

    .left {
      flex: 0 0 200px;

      ul {
        overflow-y: auto;
        height: 450px;

        li {
          height: 25px;
          line-height: 25px;
          cursor: pointer;
          padding-left: 12px;

          &:hover {
            background: #2b63a1;
            color: #fff;
          }
        }
      }

      .remark {
        border-top: 1px solid #ccc;
        padding-top: 10px;
      }

      .active {
        background: #2b63a1;
        color: #fff;
      }
    }

    .right {
      flex: 1;
      padding: 12px;
    }
  }
</style>
